<!--  eslint-disable prettier/prettier -->
<template>
  <div class="index">
    <!-- <div class="header-title">易为教育2021年学历报名表</div> -->
    <van-cell-group style="margin-top: 0.1rem">
      <van-cell
        @click="handelHideInput('from_name')"
        v-show="!hideStatus.from_name"
        title="经办人(招生人员)"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.from_name ? form.from_name : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.from_name"
        v-model="form.from_name"
        ref="from_name"
        center
        size="large"
        label-class="title-class"
        label-width="2rem"
        label="经办人(招生人员)"
        @blur="formValueChange('from_name')"
        placeholder="请输入经办人(招生人员)"
      />
    </van-cell-group>
    <van-cell-group style="margin-top: 0.1rem">
      <van-cell title="学生信息" center title-class="green-title-class" />
      <van-cell
        @click="handelHideInput('name')"
        v-show="!hideStatus.name"
        title="姓名"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.name ? form.name : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.name"
        v-model="form.name"
        ref="name"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="姓名"
        @blur="formValueChange('name')"
        placeholder="请输入姓名"
      />
      <van-cell
        @click="handelHideCascader('gender')"
        title="性别"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ gender_text ? gender_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup v-model="hideStatus.gender" round position="bottom">
        <van-cascader
          v-model="form.gender"
          title="请选择性别"
          :options="genderOptions"
          @close="hideStatus.gender = false"
          @finish="({ selectedOptions }) => onFinish(selectedOptions, 'gender')"
        />
      </van-popup>
      <van-cell
        @click="handelHideInput('phone')"
        v-show="!hideStatus.phone"
        title="手机"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <div v-if="phoneStatus" class="red">
          <div>{{ form.phone }}</div>
          <div style="font-size: 0.18rem">*请输入正确的手机号码</div>
        </div>
        <span v-else>
          {{ form.phone ? form.phone : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.phone"
        v-model="form.phone"
        ref="phone"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="手机"
        @blur="formValueChange('phone')"
        placeholder="请输入手机"
      />
    </van-cell-group>
    <van-cell-group style="margin-top: 0.1rem">
      <van-cell title="报读情况" center title-class="green-title-class" />
      <van-cell
        @click="handelHideCascader('school')"
        title="院校名称"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ school_text ? school_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup v-model="hideStatus.school" round position="bottom">
        <van-cascader
          v-model="form.school"
          title="请选择院校名称"
          :options="schoolOptions"
          @close="hideStatus.school = false"
          @finish="({ selectedOptions }) => onFinish(selectedOptions, 'school')"
        />
      </van-popup>
      <van-cell
        @click="handelHideCascader('level')"
        title="报读层次"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ level_text ? level_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup v-model="hideStatus.level" round position="bottom">
        <van-cascader
          v-model="form.level"
          title="请选择报读层次"
          :options="levelOptions"
          @close="hideStatus.level = false"
          @finish="({ selectedOptions }) => onFinish(selectedOptions, 'level')"
        />
      </van-popup>
      <van-cell
        @click="handelHideCascader('profession')"
        title="报读专业"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ profession_text ? profession_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup v-model="hideStatus.profession" round position="bottom">
        <van-cascader
          v-model="form.profession_id"
          title="请选择报读专业"
          :options="professionOptions"
          @close="hideStatus.profession = false"
          @finish="
            ({ selectedOptions }) => onFinish(selectedOptions, 'profession')
          "
        />
      </van-popup>
    </van-cell-group>
    <van-cell-group style="margin-top: 0.1rem; background: #fff">
      <van-cell
        title="费用信息"
        center
        title-class="green-title-class"
        :border="false"
      />
      <div class="table" v-if="product && product.user_charge.length > 0">
        <div class="tr">
          <div class="td">收费项</div>
          <div class="td">价格</div>
          <div class="td">数量</div>
          <div class="td">金额</div>
          <div class="td">备注</div>
        </div>
        <div
          class="tr"
          v-for="(item, index) in product.user_charge"
          :key="index"
        >
          <div class="td">{{ item.title }}</div>
          <div class="td">{{ item.price }}</div>
          <div class="td">{{ item.number }}</div>
          <div class="td">{{ item.price_sum }}</div>
          <div class="td">{{ item.remark || "-" }}</div>
        </div>
        <div class="tr">
          <div class="td">汇总</div>
          <div class="td">-</div>
          <div class="td">-</div>
          <div class="td">{{ all_price_sum }}</div>
          <div class="td">-</div>
        </div>
        <!-- <span class="red" style="font-size: 0.14rem !important">
          (底价{{ product && product.min_price ? product.min_price : 0 }})
        </span> -->
      </div>
      <van-empty v-else description="请先选择院校层次才能查看到费用信息哦" />
      <van-cell
        @click="handelHideInput('pay')"
        v-show="!hideStatus.pay"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <div slot="title">
          <span> 总费用(成交价) </span>
        </div>
        <div v-if="overPrice" class="red">
          <div>{{ form.pay }}</div>
          <div style="font-size: 0.18rem">*不可低于底价</div>
        </div>
        <span v-else>
          {{ form.pay ? form.pay : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.pay"
        v-model="form.pay"
        ref="pay"
        center
        size="large"
        label-class="title-class"
        label-width="2rem"
        label="总费用(成交价)"
        @blur="formValueChange('pay')"
        placeholder="请输入总费用(成交价)"
      />
      <van-cell
        title="优惠情况"
        center
        :value="!overPrice && preferential > 0 ? '-' + preferential : 0"
        size="large"
        title-class="title-class"
        :value-class="
          preferential
            ? 'value-class value-margin orange'
            : 'value-class value-margin'
        "
      ></van-cell>
    </van-cell-group>
    <van-cell-group style="margin-top: 0.1rem">
      <van-cell title="缴费方式" center title-class="green-title-class" />
      <van-cell
        title="分期方式"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <van-radio-group v-model="form.pay_status" direction="horizontal">
          <van-radio :name="1" icon-size="24px">
            一次性付清
            <template #icon="props">
              <div v-show="props.checked" class="img-icon"><div></div></div>
              <div v-show="!props.checked" class="img-icon"></div>
            </template>
          </van-radio>
          <van-radio :name="2" icon-size="24px">
            正常分期
            <template #icon="props">
              <div v-show="props.checked" class="img-icon"><div></div></div>
              <div v-show="!props.checked" class="img-icon"></div>
            </template>
          </van-radio>
        </van-radio-group>
      </van-cell>
      <div v-show="form.pay_status === 1">
        <van-cell
          title="费用名称"
          center
          value="报名费用"
          size="large"
          title-class="title-class"
          value-class="value-class value-margin"
        ></van-cell>
        <van-cell
          title="金额"
          center
          :value="form.pay || 0"
          size="large"
          title-class="title-class"
          :value-class="
            form.pay
              ? 'value-class value-margin orange'
              : 'value-class value-margin'
          "
        ></van-cell>
        <van-cell
          @click="handelHideCalendar('date1', 1)"
          title="缴费日期"
          center
          is-link
          size="large"
          title-class="title-class"
          value-class="value-class"
        >
          <span>
            {{
              form.pay_content1[0].end_time
                ? form.pay_content1[0].end_time
                : "请选择"
            }}
          </span>
        </van-cell>
        <van-calendar
          :min-date="minDate"
          :max-date="maxDate"
          :default-date="
            form.pay_content1[0].end_time
              ? new Date(form.pay_content1[0].end_time)
              : new Date()
          "
          title="缴费日期"
          v-model="hideStatus.date1"
          @confirm="date => onConfirm(date, 'date1')"
        />
      </div>
      <div v-show="form.pay_status === 2">
        <template v-if="!form.pay_content2 || form.pay_content2.length <= 0">
          <van-empty description="暂无分期方式" />
        </template>
        <template v-if="form.pay_content2.length > 0">
          <van-cell
            center
            size="large"
            title-class="title-class"
            value-class="value-class"
          >
            <div class="item-wrapper">
              <div class="title-class">费用名称</div>
              <div class="title-class">金额</div>
              <div class="title-class">缴费日期</div>
            </div>
          </van-cell>
          <van-cell
            center
            size="large"
            title-class="title-class"
            value-class="value-class"
            v-for="(item, index) in form.pay_content2"
            :key="item.id"
          >
            <div class="item-wrapper" @click="handelHideCalendar(index)">
              <div>{{ item.title }}</div>
              <div>
                {{ item.price || "未知" }}
              </div>
              <div>
                {{ item.end_time ? item.end_time : "请选择" }}
              </div>
            </div>
            <van-calendar
              :min-date="minDate"
              :max-date="maxDate"
              :default-date="
                item.end_time ? new Date(item.end_time) : new Date()
              "
              title="缴费日期"
              v-model="hideStatus.dateList[index]"
              @confirm="date => onConfirm(date, index)"
            />
          </van-cell>
        </template>
      </div>
      <van-cell
        title="收费单位"
        center
        :value="form.collection_unit"
        size="large"
        title-class="title-class"
        value-class="value-class value-flex value-margin"
      ></van-cell>
      <van-cell
        @click="handelHideCalendar('date5', 1)"
        title="报名时间"
        center
        is-link
        value="请选择"
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ form.registration_at ? form.registration_at : "请选择" }}
        </span>
      </van-cell>
      <van-calendar
        :min-date="minDate"
        :max-date="maxDate"
        :default-date="
          form.registration_at ? new Date(form.registration_at) : new Date()
        "
        title="报名时间"
        v-model="hideStatus.date5"
        @confirm="date => onConfirm(date, 'date5')"
      />
      <van-cell
        title="是否开发票"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <van-radio-group v-model="form.is_invoice" direction="horizontal">
          <van-radio :name="1" icon-size="24px">
            是
            <template #icon="props">
              <div v-show="props.checked" class="img-icon"><div></div></div>
              <div v-show="!props.checked" class="img-icon"></div>
            </template>
          </van-radio>
          <van-radio :name="0" icon-size="24px">
            否
            <template #icon="props">
              <div v-show="props.checked" class="img-icon"><div></div></div>
              <div v-show="!props.checked" class="img-icon"></div>
            </template>
          </van-radio>
        </van-radio-group>
      </van-cell>
      <van-cell
        title="是否签合同"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <van-radio-group
          :disabled="isContractDisabled"
          v-model="form.is_contract"
          direction="horizontal"
        >
          <van-radio :name="1" icon-size="24px">
            是
            <template #icon="props">
              <div v-show="props.checked" class="img-icon"><div></div></div>
              <div v-show="!props.checked" class="img-icon"></div>
            </template>
          </van-radio>
          <van-radio :name="0" icon-size="24px">
            否
            <template #icon="props">
              <div v-show="props.checked" class="img-icon"><div></div></div>
              <div v-show="!props.checked" class="img-icon"></div>
            </template>
          </van-radio>
        </van-radio-group>
      </van-cell>
    </van-cell-group>

    <van-button
      type="primary"
      :class="completeAll ? '' : 'huise'"
      @click="handelSubmit"
      round
      block
      >提交报名</van-button
    >
    <van-popup
      :close-on-click-overlay="false"
      catch:touchstart
      round
      v-model="showTips"
      style="width: 4.6rem; height: 3.64rem"
    >
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow: hidden;
          height: 100%;
        "
      >
        <img
          style="width: 1rem; height: 1rem; margin-top: 0.5rem"
          src="@/static/success_img.png"
          alt=""
        />
        <span style="color: #00b584; font-size: 0.24rem; margin-top: 0.24rem"
          >提交成功</span
        >
        <van-button
          type="primary"
          style="
            background-color: #00b584;
            border-color: #00b584;
            width: 2.8rem;
            height: 0.6rem;
          "
          @click="handelLookExcal"
          round
          block
          >点击生成报名表</van-button
        >
      </div>
    </van-popup>
    <van-loading
      v-if="loading1"
      style="
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        justify-content: center;
        z-index: 9999;
      "
      vertical
    />
    <van-popup closeable round v-model="showExcel">
      <div
        style="
          width: 5.66rem;
          height: 8rem;
          overflow: hidden;
          position: relative;
        "
      >
        <van-loading
          v-if="loading"
          style="
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 8rem;
            justify-content: center;
          "
          vertical
        />
        <img
          style="width: 100%; height: 100%"
          :src="img"
          alt=""
          @load="imgLoaded"
        />
      </div>
    </van-popup>
    <div
      v-show="showExcel"
      style="
        position: fixed;
        bottom: calc(50% - 5.2rem);
        left: calc(50% - 1.88rem);
        width: 3.76rem;
        height: 0.78rem;
        line-height: 0.78rem;
        text-align: center;
        border-radius: 0.1rem;
        font-size: 0.24rem;
        background-color: #fff;
        z-index: 9999;
      "
    >
      长按图片保存并发送确认
    </div>
    <div class="nav" @click="$router.go(-1)">返回</div>
  </div>
</template>
<script>
//eslint-disable prettier/prettier
import moment from "moment";
import axios from "axios";
// 统一加上headers
axios.interceptors.request.use(
  // eslint-disable-next-line prettier/prettier
  function (config) {
    // Do something before request is sent
    // console.log(config);
    config.headers = {
      version: "v1",
      "api-access-token": "ca87846db16a561b97c767e0624513f947f52345"
    };
    return config;
  },
  // eslint-disable-next-line prettier/prettier
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);
export default {
  data() {
    return {
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2035, 0, 1),
      baseData: null,
      // 输入框的显示 (true) 和隐藏 (false)
      hideStatus: {
        from_name: false,
        name: false,
        gender: false,
        phone: false,
        school: false,
        level: false,
        profession: false,
        pay: false,
        // 缴费方式1 的缴费日期
        date1: false,
        // 缴费方式2 的缴费日期数组
        dateList: [],
        date5: false
      },
      // 最终要提交的信息
      form: {
        // 经办人
        from_name: "",
        // 学生姓名
        name: "",
        // 性别
        gender: 0,
        // 手机
        phone: "",
        // 学校
        school: null,
        // 层次
        level: null,
        // 专业
        profession: null,
        // 专业 id
        profession_id: null,
        // 总费用
        pay: null,
        // 支付方式
        pay_status: 1,
        // 产品 id
        product_id: "",
        // 缴费方式1
        pay_content1: [
          {
            // 价钱
            price: "",
            // 时间
            end_time: moment(new Date()).format("YYYY-MM-DD"),
            title: "报名费用"
          }
        ],
        // 缴费方式2
        pay_content2: [],
        // 报名时间
        registration_at: "",
        // 收款单位
        collection_unit: "",
        is_invoice: 0, // 是否开发票
        is_contract: 0 // 是否签合同
      },
      isContractDisabled: false, // 签合同是否禁用
      gender_text: "",
      school_text: "",
      level_text: "",
      profession_text: "",
      product: null,
      genderOptions: [],
      schoolOptions: [{ text: "school", value: 0 }],
      levelOptions: [{ text: "level", value: 0 }],
      professionOptions: [{ text: "profession", value: 0 }],
      phoneStatus: false,
      showTips: false,
      showExcel: false,
      loading: false,
      loading1: false,
      img: ""
    };
  },
  watch: {
    // 学校
    "form.school"(newVal) {
      this.levelOptions = this.baseData.info
        .filter(item => {
          // console.log(item.id, newVal);
          if (item.id == newVal) return true;
          else return false;
        })[0]
        .children.map(item => ({
          text: item.title,
          value: item.id,
          child: item.children
        }));
      this.form.level = null;
      this.form.profession = null;
      this.profession_text = "";
      this.level_text = "";
    },
    // 层次
    "form.level"(newVal) {
      if (!newVal) return;
      // 清空数据
      this.product = null;
      this.form.pay = "";
      this.form.pay_content2 = [];
      const filterData = this.levelOptions.filter(item => {
        // console.log(item.id, newVal);
        if (item.value == newVal) return true;
        else return false;
      });
      if (filterData.length > 0) {
        this.professionOptions = filterData[0].child.map(item => ({
          text: item.title,
          value: item.id,
          child: item.children
        }));
      }
      // 层次变化 重新请求产品的接口
      axios.get("/api/student/product?level_id=" + newVal).then(res => {
        // console.log(res, 11);
        if (res.data.code !== 200) {
          this.$toast(res.data.msg);
          return false;
        }
        this.form.product_id = res.data.data.id;
        this.product = res.data.data;
        this.product["allPrice"] =
          res.data.data.pay_content &&
          res.data.data.pay_content.reduce((pre, curr) => {
            return curr.price / 1 + pre;
          }, 0);
        console.log(this.product, 344);
      });
      this.form.profession = 0;
    },
    "form.pay"(newVal) {
      if (newVal && !this.overPrice) {
        this.form.pay_content1[0].price = newVal;
        if (this.product && this.product.pay_content instanceof Array) {
          let reduce_price = newVal - this.product.allPrice;
          let hideStatus = [];
          this.form.pay_content2 =
            this.product &&
            this.product.pay_content &&
            this.product.pay_content.map((item, index) => {
              hideStatus.push(false);
              let price = 0;
              if (reduce_price <= 0) price = item.price;
              else price = item.price / 1 + reduce_price * (item.scale / 100);
              return {
                id: parseInt(Math.random() * 10000000),
                price,
                end_time:
                  index === 0
                    ? moment(new Date()).format("YYYY-MM-DD")
                    : item.end_time,
                title: item.title
              };
            });
          this.hideStatus.dateList = hideStatus;
          // console.log(this.form.pay_content2, "this.form.pay_content2");
        }
      }
    },
    // 是否开发票
    "form.is_invoice"(newVal) {
      if (newVal === 1) {
        this.form.is_contract = 1;
        this.isContractDisabled = true;
      } else {
        this.isContractDisabled = false;
      }
    }
  },
  computed: {
    // 判断是否低于低价 低于 false 不低于 true
    overPrice() {
      if (this.product && this.form.pay) {
        if (this.form.pay - this.product.min_price < 0) {
          return true;
        }
      }
      return false;
    },
    // 优惠的价格
    preferential() {
      return this.all_price_sum && this.form.pay
        ? this.all_price_sum - this.form.pay
        : false;
    },
    // 所有产品的总价
    all_price_sum() {
      const sum =
        this.product &&
        this.product.user_charge.reduce((pre, curr) => {
          console.log(pre, "pre");
          console.log(curr, "curr");
          return pre + curr.price_sum / 1;
        }, 0);
      console.log(sum);
      return sum;
    },
    // 是否填写完成 true 完成 false 没完成
    completeAll() {
      let isNull = true;
      for (let item in this.form) {
        console.log(item, this.form[item]);
        if (this.form[item] === "" || this.form[item] == null) isNull = false;
        else if (this.form.pay_status == 1) {
          if (
            this.form.pay_content1[0].end_time === "" ||
            this.form.pay_content1[0].end_time == null
          )
            isNull = false;
        } else if (this.form.pay_status == 2) {
          if (!this.form.pay_content2 || this.form.pay_content2.length <= 0)
            isNull = false;
          this.form.pay_content2.map(item => {
            if (item.end_time === "" || item.end_time == null) isNull = false;
          });
        }
      }
      if (this.overPrice || this.phoneStatus) isNull = false;
      console.log(this.overPrice, this.phoneStatus);
      // console.log(
      //   this.form.pay_content1[0].end_time === "" ||
      //     this.form.pay_content1[0].end_time == null
      // );
      return isNull;
    }
  },

  mounted() {
    // baseUrl;
    // this.form.gender = 1;
    // 请求页面的需要的一些数据
    axios("/api/student/apply").then(res => {
      // console.log(res);
      if (res.data.code !== 200) {
        this.$toast(res.data.msg || "出错了哦,请联系技术~");
        return false;
      }
      const data = res.data.data;
      this.baseData = data;
      console.log(data, "请求的数据");
      this.form.collection_unit = data.collection_unit;
      // 性别的数据源
      this.genderOptions = data.genders.map((item, index) => ({
        text: item,
        value: index
      }));
      // 学校的数据源
      this.schoolOptions = data.info.map(item => ({
        text: item.title,
        value: item.id,
        child: item.children
      }));
    });
  },
  methods: {
    // 隐藏和显示输入框
    handelHideInput(refName) {
      console.log(refName, "refName");
      this.hideStatus[refName] = !this.hideStatus[refName];
      setTimeout(() => {
        this.$refs[refName].focus();
      });
    },
    // 输入框变化时
    formValueChange(filedName) {
      // 总成交价 输入的只能为数字
      if (
        filedName === "pay" &&
        Number(this.form[filedName]).toString() === "NaN"
      ) {
        this.form[filedName] = null;
        this.$toast("只能输入数字");
      }
      // 校验手机
      if (
        filedName === "phone" &&
        !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)
      ) {
        this.phoneStatus = true;
      } else if (filedName === "phone") {
        this.phoneStatus = false;
      }
      this.hideStatus[filedName] = !this.hideStatus[filedName];
    },
    // 控制要先选学校再选层次再选专业
    handelHideCascader(filedName) {
      if (filedName === "level" && !this.school_text) {
        this.$toast("请先选择院校哦~");
        return;
      }

      if (filedName === "profession" && !this.school_text) {
        console.log(this.form.school);
        this.$toast("请先选择院校哦~");
        return;
      }
      if (filedName === "profession" && !this.level_text) {
        this.$toast("请先选择层次哦~");
        return;
      }
      this.hideStatus[filedName] = !this.hideStatus[filedName];
    },
    // 显示和隐藏日期组件
    handelHideCalendar(filedName, isDisabled) {
      if (!isDisabled) return;
      // filedName 为数字时为 缴费方式2
      if (typeof filedName === "number")
        this.hideStatus.dateList = this.hideStatus.dateList.map(
          (item, index) => {
            if (index === filedName) return true;
            else return item;
          }
        );
      else this.hideStatus[filedName] = true;
    },
    // 日期选择的变化
    onConfirm(date, filedName) {
      console.log(date, filedName);
      if (typeof filedName === "number") {
        this.form.pay_content2[filedName].end_time = moment(date).format(
          "YYYY-MM-DD"
        );
        this.hideStatus.dateList[filedName] = false;
      } else {
        if (filedName === "date1") {
          this.form.pay_content1[0].end_time = moment(date).format(
            "YYYY-MM-DD"
          );
        }

        if (filedName === "date5") {
          this.form.registration_at = moment(date).format("YYYY-MM-DD");
        }
        this.hideStatus[filedName] = false;
        // console.log(moment(date).format("YYYY-MM-DD"));
      }
    },
    // 院校或者层次或者专业择完成后触发
    onFinish(selectedOptions, filedName) {
      console.log(selectedOptions);
      this.hideStatus[filedName] = false;
      this[filedName + "_text"] = selectedOptions
        .map(option => option.text)
        .join("");
      // console.log(this.form[filedName]);
    },
    // 提交报名
    handelSubmit() {
      // console.log(this.form, "form");
      // console.log(this.completeAll, "this.completeAll");

      if (!this.completeAll) {
        this.$toast("请先填写完整数据才能提交哦~");
        return false;
      }
      this.loading1 = true;
      axios
        .post("/api/student/apply", {
          ...this.form,
          preferential: this.preferential,
          pay_content: this.form["pay_content" + this.form.pay_status],
          profession: this.profession_text,
          school: this.school_text,
          level: this.level_text
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.img = res.data.data;
            this.showTips = true;
            this.loading1 = false;
          } else {
            this.loading1 = false;
            this.$toast(res.data.msg || "出错了哦,请联系技术~");
          }
        });
    },
    // 点击生成报名表
    handelLookExcal() {
      this.showExcel = true;
      // this.showTips = false;
      this.loading = true;
      let id = setTimeout(() => {
        this.loading = false;
        clearTimeout(id);
      }, 1000);
    },
    imgLoaded() {
      this.loading = false;
    }
  }
};
</script>
<style lang="less">
.index {
  .huise {
    background-color: #bbb !important;
    border: 1px solid #bbb !important;
  }
  .orange {
    color: #ff5400 !important;
  }
  .red {
    color: #ff0000 !important;
  }
  .van-button--block {
    width: 3.48rem;
    height: 0.7rem;
    margin: 0.55rem auto;
  }
  .van-radio--horizontal:last-child {
    margin-right: 0;
  }
  .van-radio-group--horizontal {
    justify-content: flex-end;
  }
  .van-radio__icon {
    display: flex;
    align-items: center;
  }
  .img-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.16rem;
    height: 0.16rem;
    border: 1px solid #00be8b;
    border-radius: 50%;
    & > div {
      width: 0.08rem;
      height: 0.08rem;
      background: #00be8b;
      border-radius: 50%;
    }
  }
  .van-cell--clickable:active {
    background-color: #fff;
  }
  background-color: #f1f1f1;
  min-height: 100vh;
  padding-bottom: 1px;
  box-sizing: border-box;
  overflow: auto;
  .header-title {
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    font-size: 0.28rem;
    color: #333333;
    font-weight: bold;
    font-family: PingFang SC;
  }
  .title-class {
    font-size: 0.24rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .green-title-class {
    font-size: 0.26rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #00b584;
  }
  .value-class {
    font-size: 0.24rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
  .value-margin {
    margin-right: 20px;
  }
  .value-flex {
    flex: 3 !important;
  }
  .table {
    font-size: 0.18rem;
    margin: 0 36px 0 16px;
  }
  .tr {
    display: flex;
    height: 0.49rem;
    line-height: calc(0.49rem - 1px);
    border-bottom: 1px solid #aaa;
    &:first-child {
      border-top: 1px solid #aaa;
      height: 0.6rem;
      line-height: calc(0.6rem - 2px);
    }
    .td,
    .th {
      width: calc((7.5rem - 52px - 2.2rem - 4px) / 4);
      border-right: 1px solid #aaa;
      text-align: center;
    }
    .td:first-child,
    .th:first-child {
      width: calc(2.2rem - 2px);
      border-left: 1px solid #aaa;
    }
  }
  .item-wrapper {
    display: flex;
    margin: 0 0.9rem;
    justify-content: space-between;
    div {
      width: 32%;
      text-align: center;
    }
    // div:nth-child(2) {
    //   text-align: center;
    // }
  }
  .nav {
    position: fixed;
    bottom: 20%;
    right: 0;
    border-radius: 0.15rem 0 0 0.15rem;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    background-color: #78a4ff;
    color: #fff;
    font-size: 0.26rem;
  }
}
</style>
